<template>
  <el-col :span="18">
    <el-carousel type="card" indicator-position="none" ref="carousel" :autoplay="autoplay" height="200px" @click.native="LinkTo">
      <el-carousel-item v-for="item in AnnouncementItems" :key="item.name">
        <h3>{{ item.name }}</h3>
      </el-carousel-item>
    </el-carousel>
    <BookList></BookList>
  </el-col>
</template>

<script>
import BookList from '../../Book/BookList'
export default {
  name: 'Carousel',
  components: {
    'BookList': BookList
  },
  data () {
    return {
      autoplay: false,
      AnnouncementItems: [
        {name: '开服公告', url: '/Announcement/开服公告', tag: '开服公告'},
        {name: '优惠活动', url: '/Announcement/优惠活动', tag: '优惠活动'},
        {name: '开发人员', url: '/Announcement/开发人员', tag: '开发人员'}
      ]
    }
  },
  created () {
  },
  methods: {
    LinkTo () {
      let activeIndex = this.$refs.carousel.activeIndex
      // this.$store.commit('editChapter', this.items[activeIndex].name)
      this.$router.push({
        path: this.AnnouncementItems[activeIndex].url,
        query: {
          tag: this.AnnouncementItems[activeIndex].tag
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
